import { useState } from "react";
import { useSelector } from "react-redux";
import type { RootState } from "../../Store/index";
import type { MenuProps } from "antd";
import { Breadcrumb, Layout, Menu, theme } from "antd";
import { NavLink, Outlet } from "react-router-dom";
import { erji } from "../../router";
function Index() {
  const { Header, Content, Footer, Sider } = Layout;
  const info = useSelector((state: RootState) => state.counter.info);
  console.log(info);
  
  type MenuItem = Required<MenuProps>["items"][number];

  function getItem(
    label: React.ReactNode,
    key: React.Key,
    icon?: React.ReactNode,
    children?: MenuItem[]
  ): MenuItem {
    return {
      key,
      icon,
      children,
      label,
    } as MenuItem;
  }
  const two = (arr) => {
    const items: MenuItem[] = [];
    arr &&
      arr.forEach((item) => {
        if (item.children) {
          items.push(
            getItem(
              <NavLink to={item.path}>{item.title}</NavLink>,
              item.path,
              "",
              two(item.children)
            )
          );
        } else {
          items.push(
            getItem(
              <NavLink to={item.path}>{item.title}</NavLink>,
              item.path,
              ""
            )
          );
        }
      });
    return items;
  };
  const items = two(erji);

  //   const items: MenuItem[] = [
  //     getItem("Option 1", "1", <PieChartOutlined />),
  //     getItem("Option 2", "2", <DesktopOutlined />),
  //     getItem("User", "sub1", <UserOutlined />, [
  //       getItem("Tom", "3"),
  //       getItem("Bill", "4"),
  //       getItem("Alex", "5"),
  //     ]),
  //     getItem("Team", "sub2", <TeamOutlined />, [
  //       getItem("Team 1", "6"),
  //       getItem("Team 2", "8"),
  //     ]),
  //     getItem("Files", "9", <FileOutlined />),
  //   ];
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  return (
    <div>
      <Layout style={{ minHeight: "100vh" }}>
        <Sider
          collapsible
          collapsed={collapsed}
          onCollapse={(value) => setCollapsed(value)}
        >
          <div className="demo-logo-vertical" />
          <Menu
            theme="dark"
            defaultSelectedKeys={["1"]}
            mode="inline"
            items={items}
          />
        </Sider>
        <Layout>
          <Header style={{ padding: 0, background: colorBgContainer }} />
          <Content style={{ margin: "0 16px" }}>
            <Breadcrumb style={{ margin: "16px 0" }}>
              用户:{info}
            </Breadcrumb>
            <div
              style={{
                padding: 24,
                minHeight: 360,
                background: colorBgContainer,
                borderRadius: borderRadiusLG,
              }}
            >
              <Outlet></Outlet>
            </div>
          </Content>
          <Footer style={{ textAlign: "center" }}>
            Ant Design ©{new Date().getFullYear()} Created by Ant UED
          </Footer>
        </Layout>
      </Layout>
    </div>
  );
}

export default Index;
